<!DOCTYPE html>
<html lang="cs">
<head>
  <meta charset="UTF-8" />
  <title>Vánoční Vánočniálové - losování zvířat</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f4f6f8;
      padding: 20px;
      text-align: center;
    }
    h1 { margin-bottom: 10px; }
    button {
      font-size: 18px;
      padding: 12px 24px;
      cursor: pointer;
      border-radius: 8px;
      border: none;
      background: #4f46e5;
      color: white;
    }
    button:disabled {
      background: #999;
      cursor: not-allowed;
    }
    .card {
      margin: 30px auto;
      padding: 20px;
      max-width: 420px;
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      border-top: 10px solid #000;
    }
    .class {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .animal {
      font-size: 24px;
      margin-bottom: 10px;
    }
    img {
      max-width: 100%;
      border-radius: 8px;
    }
    .remaining {
      margin-top: 20px;
      font-size: 14px;
      color: #555;
    }
  </style>
</head>
<body>

<h1>Losování zvířat 🐾</h1>
<p>Klikni na tlačítko a vylosuj si náhodné zvíře.<br>Kartičky se neopakují.</p>

<button id="drawBtn">Vylosovat zvíře</button>

<div class="card" id="result" style="display:none;">
  <div class="class" id="animalClass"></div>
  <div class="animal" id="animalName"></div>
  <img id="animalImage" alt="" style="display:none;">
</div>

<div class="remaining" id="remaining"></div>

<script>
  const animals = [
    // Ptáci – žlutá
    {cls:'Ptáci', color:'#facc15', name:'Kulíšek nejmenší', img:'ptaci/kulisek.jpg'},
    {cls:'Ptáci', color:'#facc15', name:'Kachnička mandarínská', img:'ptaci/kachnicka.jpg'},
    {cls:'Ptáci', color:'#facc15', name:'Kakadu inka', img:'ptaci/kakadu.jpg'},
    {cls:'Ptáci', color:'#facc15', name:'Tučňák kroužkový', img:'ptaci/tucnak.jpg'},
    {cls:'Ptáci', color:'#facc15', name:'Potu velký', img:'ptaci/potu.jpg'},
    {cls:'Ptáci', color:'#facc15', name:'Hadilov písař', img:'ptaci/hadilov.jpg'},

    // Plazi – oranžová
    {cls:'Plazi', color:'#fb923c', name:'Vousivka rozpačitá', img:'plazi/vousivka.jpg'},
    {cls:'Plazi', color:'#fb923c', name:'Batagur tuntong', img:'plazi/batagur.jpg'},
    {cls:'Plazi', color:'#fb923c', name:'Dráček létavý', img:'plazi/dracek.jpg'},
    {cls:'Plazi', color:'#fb923c', name:'Krokodýl mořský', img:'plazi/krokodyl.jpg'},
    {cls:'Plazi', color:'#fb923c', name:'Agamka sinajská', img:'plazi/agamka.jpg'},
    {cls:'Plazi', color:'#fb923c', name:'Krajta zelená', img:'plazi/krajta.jpg'},

    // Obojživelníci – červená
    {cls:'Obojživelníci', color:'#ef4444', name:'Mlok skvrnitý', img:'obojzivelnici/mlok.jpg'},
    {cls:'Obojživelníci', color:'#ef4444', name:'Velemlok čínský', img:'obojzivelnici/velemlok.jpg'},
    {cls:'Obojživelníci', color:'#ef4444', name:'Rohatka ozdobná', img:'obojzivelnici/rohatka.jpg'},
    {cls:'Obojživelníci', color:'#ef4444', name:'Hrabatka drsná', img:'obojzivelnici/hrabatka.jpg'},
    {cls:'Obojživelníci', color:'#ef4444', name:'Ropuška starostlivá', img:'obojzivelnici/ropuska.jpg'},
    {cls:'Obojživelníci', color:'#ef4444', name:'Axolotl mexický', img:'obojzivelnici/axolotl.jpg'},

    // Ryby – zelená
    {cls:'Ryby', color:'#22c55e', name:'Tlustohlavec tasmánský', img:'ryby/tlustohlavec.jpg'},
    {cls:'Ryby', color:'#22c55e', name:'Měsíčník svítivý', img:'ryby/mesicnik.jpg'},
    {cls:'Ryby', color:'#22c55e', name:'Koníček mořský', img:'ryby/konicek.jpg'},
    {cls:'Ryby', color:'#22c55e', name:'Bojovnice pestrá', img:'ryby/bojovnice.jpg'},
    {cls:'Ryby', color:'#22c55e', name:'Udicovka tasmánská', img:'ryby/udicovka.jpg'},
    {cls:'Ryby', color:'#22c55e', name:'Ježík hnědý', img:'ryby/jezik.jpg'},

    // Paryby – modrá
    {cls:'Paryby', color:'#3b82f6', name:'Manta obrovská', img:'paryby/manta.jpg'},
    {cls:'Paryby', color:'#3b82f6', name:'Kladivoun bronzový', img:'paryby/kladivoun.jpg'},
    {cls:'Paryby', color:'#3b82f6', name:'Žralok obrovský', img:'paryby/zralok.jpg'},
    {cls:'Paryby', color:'#3b82f6', name:'Trnucha modroskvrnná', img:'paryby/trnucha.jpg'},
    {cls:'Paryby', color:'#3b82f6', name:'Máčka skvrnitá', img:'paryby/macka.jpg'},
    {cls:'Paryby', color:'#3b82f6', name:'Piloun mnohozubý', img:'paryby/piloun.jpg'},

    // Savci – růžová
    {cls:'Savci', color:'#ec4899', name:'Polární liška', img:'savci/liska.jpg'},
    {cls:'Savci', color:'#ec4899', name:'Kočka cejlonská', img:'savci/kocka.jpg'},
    {cls:'Savci', color:'#ec4899', name:'Kapustňák širokonosý', img:'savci/kapustnak.jpg'},
    {cls:'Savci', color:'#ec4899', name:'Mravenečník tříprstý', img:'savci/mravenecnik.jpg'},
    {cls:'Savci', color:'#ec4899', name:'Prase bradavičnaté', img:'savci/prase.jpg'},
    {cls:'Savci', color:'#ec4899', name:'Ptakopysk podivný', img:'savci/ptakopysk.jpg'},

    // Měkkýši – šedá
    {cls:'Měkkýši', color:'#9ca3af', name:'Páskovka hajní', img:'mekkysi/paskovka.jpg'},
    {cls:'Měkkýši', color:'#9ca3af', name:'Chobotnice modrá', img:'mekkysi/chobotnice.jpg'},
    {cls:'Měkkýši', color:'#9ca3af', name:'Sépie obecná', img:'mekkysi/sepie.jpg'},
    {cls:'Měkkýši', color:'#9ca3af', name:'Oliheň dlouhoploutvá', img:'mekkysi/olihen.jpg'},
    {cls:'Měkkýši', color:'#9ca3af', name:'Křídlatec veliký', img:'mekkysi/kridlatec.jpg'},
    {cls:'Měkkýši', color:'#9ca3af', name:'Zéva obrovská', img:'mekkysi/zeva.jpg'},

    // Pavoukovci – černá
    {cls:'Pavoukovci', color:'#000000', name:'Veleštír císařský', img:'pavoukovci/velestir.jpg'},
    {cls:'Pavoukovci', color:'#000000', name:'Skákavka černá', img:'pavoukovci/skakavka.jpg'},
    {cls:'Pavoukovci', color:'#000000', name:'Sklípkan překrásný', img:'pavoukovci/sklipkan.jpg'},
    {cls:'Pavoukovci', color:'#000000', name:'Žlaznatka smutná', img:'pavoukovci/zlaznatka.jpg'},
    {cls:'Pavoukovci', color:'#000000', name:'Štír bahijský', img:'pavoukovci/stir.jpg'},
    {cls:'Pavoukovci', color:'#000000', name:'Slíďák tatarský', img:'pavoukovci/slidak.jpg'}
  ];

  let remainingAnimals = [...animals];

  const drawBtn = document.getElementById('drawBtn');
  const result = document.getElementById('result');
  const animalClass = document.getElementById('animalClass');
  const animalName = document.getElementById('animalName');
  const animalImage = document.getElementById('animalImage');
  const remaining = document.getElementById('remaining');

  function updateRemaining() {
    remaining.textContent = `Zbývá kartiček: ${remainingAnimals.length} / ${animals.length}`;
  }

  drawBtn.addEventListener('click', () => {
    if (remainingAnimals.length === 0) return;

    const index = Math.floor(Math.random() * remainingAnimals.length);
    const animal = remainingAnimals.splice(index, 1)[0];

    animalClass.textContent = animal.cls;
    animalName.textContent = animal.name;
    animalImage.src = animal.img;
    animalImage.alt = animal.name;
    animalImage.style.display = 'block';
    result.style.borderTopColor = animal.color;
    result.style.display = 'block';

    if (remainingAnimals.length === 0) {
      drawBtn.disabled = true;
      drawBtn.textContent = 'Všechna zvířata vylosována';
    }

    updateRemaining();
  });

  updateRemaining();
</script>

</body>
</html>
